/* eslint-disable react/jsx-no-target-blank */
import { Avatar, Card, Button } from "antd";
import { BookOutlined } from "@ant-design/icons";
import { useMyContext } from "@/hooks";
import { convertImgUrl } from "@/utils/MyFun";
import { useCallback } from "react";
import { useSelector } from "react-redux";
import styled from "styled-components";
import { Link } from "react-router-dom";
import { Icon } from "@iconify/react";

const Styled = styled.div`
  .author {
    text-align: center;
  }

  @media (min-width: 1024px) {
    .author-info {
      display: block;
    }
  }
  .avatar {
    cursor: pointer;
    transition: all 600ms;
    margin: 3.75rem 0;
    &:hover {
      transform: rotate(360deg);
    }
  }
  .ant-card-body {
    display: flex;
    flex-direction: column;
    align-items: center;
    .website_author {
      font-size: 6rem;
      margin: 1.25rem 0;
    }
    .website_intro {
      font-size: 3.5rem;
    }
    .data {
      width: 100%;
      display: flex;
      text-align: center;
      margin: 1.25rem 0;
      a {
        color: #000;
        flex: 1;
      }
    }
    .flag {
      width: 100%;
      .ant-btn {
        width: 100%;
        &:hover {
          transform: scale(1.1);
          transition: all 600ms;
          background-color: rgba(234, 88, 12, 1);
        }
      }
    }
    .social {
      width: 100%;
      display: flex;
      font-size: 6rem;
      padding: 0 10rem;
      margin: 3.75rem 0;
      a {
        flex: 1;
        text-align: center;
        color: #000;
      }
    }
  }
`;

const AuthorInfo = () => {
  const {
    blogInfo: { blog_config, article_count, category_count, tag_count },
  } = useSelector((state) => state.app);
  const { messageApi } = useMyContext();

  const addToFavourites = useCallback(() => {
    messageApi.info("按CTRL + D 收藏本站");
  }, []);

  return (
    <Styled className="author animate-zoom-in ">
      <Card
        style={{
          minWidth: 300,
        }}
        hoverable
      >
        {/* 头像区域 */}
        <Avatar
          className="avatar"
          shape="square"
          src={convertImgUrl(blog_config.website_avatar)}
          size={110}
        />
        <p className="website_author">{blog_config.website_author}</p>
        <p className="website_intro">{blog_config.website_intro}</p>
        {/* 博客数据区域 */}
        <div className="data">
          <Link to="/archives">
            <p>文章</p>
            <p>{article_count}</p>
          </Link>
          <Link to="/categories">
            <p>分类</p>
            <p>{category_count}</p>
          </Link>
          <Link to="/tags">
            <p>标签</p>
            <p>{tag_count}</p>
          </Link>
        </div>
        {/* 加入书签 */}
        <div className="flag">
          <Button
            type="primary"
            icon={<BookOutlined />}
            onClick={addToFavourites}
          >
            加入书签
          </Button>
        </div>
        {/* 社交信息 */}
        <div className="social">
          <a
            target="_blank"
            href={`http://wpa.qq.com/msgrd?v=3&uin=${blog_config.qq}&site=qq&menu=yes`}
          >
            <Icon icon="ant-design:qq-circle-filled" />
          </a>
          <a href={blog_config.github} target="_blank">
            <Icon icon="mdi:github" />
          </a>
          <a href={blog_config.gitee} target="_blank">
            <Icon icon="simple-icons:gitee" />
          </a>
        </div>
      </Card>
    </Styled>
  );
};

export default AuthorInfo;
